<template>
			<div class="shop">
				<div v-for="item in datas" :key='item.id' class="shop_b">
					<router-link :to="{path:'store',query:{id:item.id}}">
					<div class="left">
						<img :src="'http://elm.cangdu.org/img/'+item.image_path" alt="">
					</div>
					<div class="right">
						<div class="right_top">
							<img src="../../public/img/pinpai.png" alt="">
							<span>{{item.name}}</span>
							<div><span v-for="(aaa,index) in item.supports" :key='index'>{{aaa.icon_name}}</span></div>
						</div>
						<div class="right_z">
							<img src="../../public/img/xing.png" alt="">
							<span class="z1">{{item.rating}}</span>
							<span class="z2">{{"月销:"+item.recent_order_num+'单'}}</span>
							<div>
								<img src="../../public/img/feng.png" alt="">
							</div>
						</div>
						<div class="but_b">
							<div class="b_1">
									<span>{{'￥'+ item.float_minimum_order_amount + '起送 / 配送费约￥' + item.float_delivery_fee}}</span>
							</div>
							<div class="b_2">
									<span class="d1">{{item.distance + ' / '}}</span>
									<span>{{item.order_lead_time}}</span>
							</div>
						</div>
					</div>
					</router-link>
				</div>
			</div>
</template>

<script>
	export default{
		name:'shop',
		data:function(){
			return{
				datas:[],
				w:'',
				j:'',
			}
		},

		created:function(){
			this.w = this.$route.query.w;
			this.j = this.$route.query.j;
			this.$axios({
				url:'https://elm.cangdu.org/shopping/restaurants?latitude=' + this.w + '&longitude=' + this.j,
				method:'get'
			}).then(res=>{
				this.datas = res.data;
			})
			
		}
		
	}
</script>

<style scoped>
	.shop{
		width: 100%;
/* 		margin-top: 10px; */
		background-color: #FFFFFF;
/* 		margin-bottom: 65px; */
	}
	
	.shop_b{
		width: 100%;
		box-sizing: border-box;
		padding: 13.406px 9.3px;
		border-bottom: 0.1px solid #f1f1f1;
		overflow: hidden;
	}
	.left{
		width: 21%;
		float: left;
	}
	.left img{
		width: 100%;
	}
	.right{
		width: 77%;
		padding-left: 2%;
		float: left;
	}
	.right_top{
		width: 100%;
		position: relative;
		font-size: 15px;
		margin-top: 0;
		display: inline-block;
	}
	.right_top img{
		width: 10%;
	}
	.right_top div{
		position: absolute;
		top: 0;
		right: 0;
	}
	.right_top span{
		border: 0.1px solid #f1f1f1;
		color: #999999;
		font-size: 12px;
	}
	.right_z{
		position: relative;
	}
	.right_z img{
		width: 20%;
		vertical-align: middle;
	}
	.right_z span{
		font-size: 12px;
		color: #999999;
		vertical-align: middle;
	}
	.right_z div{
		position: absolute;
		top: 0;
		right: 0;
	}
	.right_z div img{
		width: 100%;
	}
	.but_b{
		margin-top: 10px;
		font-size: 10px;
		font-weight: 400;
		display: flex;
		justify-content: space-between;
	}
	.right_top span{
		font-size: 12px;
		vertical-align: middle;
	} 
	.b_1{
		/* transform: scale(.6); */
		font-size: 10px;
		color: #999988;
	}
	.b_2{
		/* transform: scale(.7); */
	}
	.b_2 .d1{
		font-size: 10px;
		color: #999988;
	}
	.b_2 span{
		color: #0080FF;
	}
</style>
